<!-- 首页 -->
<template>
	<view class="page">
		<view class="navbar-box">
			<u-navbar :is-back="true" back-icon-color="#fff" :title="title" :border-bottom="border" :background="background"></u-navbar>
		</view>
		<view class="image-box-container">
			<view class="image-box">
				<u-image width="100%" height="100%" :src="vuex_user.avatar"></u-image>
			</view>
		</view>
		<view class="mian-box">
			<view class="avatar-box">
				<u-image width="130" height="130" shape="circle" :src="vuex_user.avatar"></u-image>
			</view>
			<view class="nickname">{{vuex_user.nickName}}</view>
			<view class="address-box">
				<view>{{vuex_user.city}}</view>
				<view class="dot">·</view>
				<view>{{vuex_user.province}}</view>
			</view>
			<view class="sign-box">
				<view>{{vuex_user.signName}}</view>
			</view>
		</view>
		<talk-list :my="true" @menu="menu" @thumb="thumb" @more="more" @chat="chat" :dataList="dataList"></talk-list>
		<u-empty icon-size="400" src="/static/empty.png" text="暂无动态" v-if="dataList.length == 0" mode="data"></u-empty>
		<view class="loadmore-box" v-if="dataList.length > 0">
			<u-loadmore :status="status" @loadmore="load"></u-loadmore>
		</view>
		
		<u-action-sheet :list="sheetList" v-model="sheetShow" @click="clickSheetBtn"></u-action-sheet>
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	data() {
		return {
			background: {
				backgroundColor: 'unset',
			},
			title: '',
			border: false,
			form: {
				lon: '',
				lat: '',
			},
			sheetList: [],
			sheetShow: false,
			status: 'loadmore',
			scrollTop: 0,
			isEnd: false,
			current: 1,
			pageSize: 10,
			dataList: [],
		};
	},
	onLoad() {
		this.query();
	},
	onReachBottom() {
		this.load();
		console.log('到底');
	},
	computed: {
		...mapState(['vuex_user']),
	},
	methods: {
		reload() {
			this.query();
		},
		load() {
			this.loadmore();
		},
		menu(e) {
			this.sheetList = e;
			this.sheetShow = true;
		},
		clickSheet(sheet) {
			if('remove' == sheet.tag){
				this.deleteTopic(sheet.id);
			}
		},
		deleteTopic(id) {
			this.$u.get('/wq/dynamic/delete',{
				id: id,
			}).then(res => {
				this.reload();
			})
		},
		async loadmore() {
			this.status = 'loading';
			if(this.isEnd){
				this.status = 'nomore';
				return;
			}
			var res = await this.getDataList();
			this.dataList = this.dataList.concat(res.rows);
		},
		query() {
			this.current = 1;
			this.isEnd = false;
			this.status = 'loadmore';
			this.loadquery();
		},
		async loadquery() {
			var res = await this.getDataList();
			this.dataList = res.rows;
		},
		async getDataList() {
			var res = await this.$u.get('/wq/dynamic/myList', {
				pageNum: this.current,
				pageSize: this.pageSize,
			});
			var totalPage = Math.ceil(res.total/this.pageSize);
			this.pages = totalPage;
			this.current ++;
			this.status = 'loadmore';
			if(this.current > this.pages){
				this.status = 'nomore';
				this.isEnd = true;
			}
			return res;
		},
		thumb(e,i) {
			this.$u.post('/wq/dynamicGive/add',{
				dynamicId: e.id,
			}).then(res => {
				if(res.data){
					this.dataList[i].giveNum = this.dataList[i].giveNum + 1;
				}else{
					this.dataList[i].giveNum = this.dataList[i].giveNum - 1;
				}
			});
		},
		chat(e) {
			this.$u.route({
				url: 'packgeMine/pages/index/dynamic',
				params: {
					dynamicId: e.id,
				}
			});
		},
		clickSheetBtn(index) {
			var sheet = this.sheetList[index];
			this.clickSheet(sheet);
		},
	}
};
</script>
<style lang="scss" scoped>
	.page {
		background-color: #fff;
	}
	.image-box-container {
		overflow: hidden;
	}
	.image-box {
		height: 600rpx;
		filter: blur(10px);
		transform:scale(1.1);
	}
	.mian-box {
		position: absolute;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		flex-direction: column;
		padding: 15px;
		padding-top: 200rpx;
	}
	.avatar-box {
		padding: 6rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}
	.navbar-box {
		position: absolute;
	}
	.dot {
		margin: 0 3px;
	}
	.nickname {
		font-size: 34rpx;
		color: #fff;
		margin: 5px 0;
		margin-bottom: 0;
		font-weight: bold;
	}
	.address-box {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 25px;
	}
	.sign-box {
		font-size: 22rpx;
		margin: 10px 0;
		color: #fff;
	}
	.topic-header {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.topic-title {
		font-size: 26rpx;
		font-weight: bolder;
	}
	.topic-more {
		font-size: 24rpx;
		color: #505152bd;
	}
	.loadmore-box {
		padding: 15px 0;
	}
</style>
